<template>
	<div class="t-main" v-loading="loading">
		<el-scrollbar max-height="60vh">
			<ul class="nav-list">
				<li
					class="nav-item"
					:class="{ active: item.value === checkType }"
					v-for="item in typeList"
					:key="item.value"
					@click="handleCheckType(item.value)"
				>
					<el-badge :value="getTypeNumber(item.value)" class="item" style="width: 90%" type="success" :show-zero="false">
						<p>{{ item.label }}</p>
					</el-badge>
				</li>
			</ul>
		</el-scrollbar>
		<section class="t-content mt10">
			<div class="search">
				<el-input v-model="searchKey" clearable placeholder="请输入内容"></el-input>
				<el-button type="primary" @click="handleSearch">
					<el-icon>
						<icon-search theme="outline" size="24" />
					</el-icon>
					搜索
				</el-button>
			</div>

			<el-scrollbar max-height="60vh" v-if="dataObjList[checkType]?.length > 0">
				<ul class="nav-card-list">
					<li class="nav-card-item" v-for="item in dataObjList[checkType]" :key="item.id" @click="handleCheck(item)">
						<FileList
							:src="item.pic"
              fit="fill"
							style="width: 100%; height: 115px; border-top-left-radius: 10px; border-top-right-radius: 10px;"
							:single="true"
						></FileList>
						<div class="item-content flex1">
							<div class="text-bold flex align-center">
								<el-icon class="mr8">
									<icon-check-one v-if="checkedList.find((v)=>v.id==item.id)" theme="outline" size="26" fill="#0052D9" />
									<icon-round v-else theme="outline" size="26" />
								</el-icon>
								<p>{{ item.dishName || item.dishsName }}</p>
							</div>

							<div class="f-between">
								<p class="text-value">
									￥<span>{{ item.price }}</span
									><span class="text-gray f14">/{{ item.quantifier }}</span>
								</p>
							</div>
						</div>
					</li>
				</ul>
			</el-scrollbar>
			<el-empty v-else :image-size="200" />
		</section>
	</div>
</template>

<script setup lang="ts">
import FileList from '@/views/aplid/DetailPage/ContentListItem/FileList/PreviewImg/index.vue'
import apiMod from '@/apiMod/index'

const props = defineProps<{
	dish_type_data: any
	modelValue?: any
}>()

const emit = defineEmits(['update:modelValue', 'update:itemType','change'])
const loading = ref(false)
const checkedList = ref([])
const searchKey = ref('')
const checkType = ref(props.dish_type_data[0]?.value)
const dataObjList = ref({})
const typeList = computed(() => {
	return [...props.dish_type_data]
})

const cleanChecked = () => {
	checkedList.value = []
	searchKey.value = ''
}

const getTypeNumber = (type) => {
	const num = checkedList.value.filter((item) => item.dishType == type)
	return num.length
}

const handleCheck = (item) => {
 	const indexKey = checkedList.value.findIndex((v) => v.id === item.id)
	if (indexKey == -1) {
		 checkedList.value.push(item)
		
	}else {
    checkedList.value.splice(indexKey, 1)
  }
	emit('update:modelValue', checkedList.value)
  emit('change',checkedList.value)
}

const handleCheckType = (value) => {
	loading.value = true
	checkType.value = value
	searchKey.value = ''
	handleSearch()
}

const handleSearch = () => {
	getDish()
}
const getDish = () => {
	// if (dataObjList.value[checkType.value]?.length > 0) {
	// 	loading.value = false
	// 	return
	// }
	apiMod
		.view_omDish_page({
			state: 0,
			dishType: checkType.value,
			dishName: searchKey.value,
      pageParaPO:{
        size:500,
        current:1,
      }
		})
		.then((res) => {
      const data  = res.data 
			dataObjList.value[checkType.value] = data.records?.map((item) => {
				item.itemType = 0
				return item
			})
			loading.value = false
		})
}

onMounted(() => {
	checkedList.value = props.modelValue || []
	if (!props.dish_type_data) return
	handleSearch()
})
</script>

<style scoped lang="scss">
:deep(.el-input__inner) {
	text-align: center !important;
}

.t-main {
	display: flex;
	padding: 10px;
	gap: 20px;
	.text-value {
		font-family: 'Microsoft YaHei Bold';
		font-weight: 700;
		font-size: 20px;
		text-align: left;
		color: #0052d9;
	}
	.nav-list {
		display: flex;
		flex-flow: column;
		gap: 8px;
		background-color: #fff;
		padding: 10px;
		border-right: 1px solid #eee;
		.nav-item {
			padding-left: 30px;
      background-color: #f5f5f569;
			line-height: 32px;
			border-radius: 5px;
			&:hover {
				cursor: pointer;
			}
		}
		.active {
			color: #0075fc;
			font-weight: bold;
			width: 223px;
			background: rgba(0, 82, 217, 0.1);

			font-family: 'Microsoft YaHei';
			font-weight: 400;
			font-size: 14px;
			color: #0052d9;
		}
	}
	.nav-item-active {
		border: 1px solid #0075fc !important;
	}
	.nav-card-list {
		display: flex;
		flex-flow: row wrap;
		gap: 8px;
		background-color: #fff;
		margin-top: 10px;
		border-radius: 10px;
		.nav-card-item {
			width: calc(100% / 3 - 10px);
			line-height: 40px;
			border-radius: 10px;
			border: 1px solid #0052d9;
			border-top: none;
			position: relative;
			&:hover {
				cursor: pointer;
			}
			.item-content {
				border-top: none;
				padding: 10px;
				display: flex;
				flex-flow: column;
				justify-content: space-around;
			}
		}
	}

	.t-content {
		flex: 1;
		.search {
			display: flex;
			align-items: center;
			gap: 10px;
		}
	}
}
</style>
